<style lang="less" scoped>
@import "@/assets/style/variables.less";

.setting {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: @border-radius;
    box-shadow: @box-shadow;
    padding: @padd;
    position: relative;
    // text-align: center;
}

.container {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.opt {
    padding-top: 20px;

    span {
        font-weight: bold;
    }
}
</style>
<template>
    <div class="setting">
        <div class="container">
            <h2>界面设置</h2>
            <div class="opt">
                <!-- <span>字体大小：</span> -->
                <el-row>
                    <el-button @click="changeFontSizeFn('16px')" type="primary" plain>默认字体大小(16px)</el-button>
                    <el-button @click="changeFontSizeFn('18px')" type="success" plain>18px</el-button>
                    <el-button @click="changeFontSizeFn('22px')" type="warning" plain>22px</el-button>
                    <el-button @click="changeFontSizeFn('24px')" type="danger" plain>24px</el-button>
                </el-row>
            </div>
            <div class="opt">
                <!-- <span>页面宽度：</span> -->
                <el-row>
                    <el-button @click="changeMaxWidthFn('100%')" type="primary" plain>通栏显示(100%)</el-button>
                    <el-button @click="changeMaxWidthFn('1200px')" type="success" plain>1200px</el-button>
                    <el-button @click="changeMaxWidthFn('1400px')" type="warning" plain>1400px</el-button>
                    <el-button @click="changeMaxWidthFn('1600px')" type="danger" plain>1600px</el-button>
                </el-row>
            </div>



            <div class="opt">
                <!-- <span>字体名称：</span> -->
                <el-row>
                    <el-button @click="changeFontFamilyFn('Arial, Helvetica, sans-serif')" type="primary"
                        plain>默认字体(Arial, Helvetica, sans-serif)</el-button>
                    <el-button @click="changeFontFamilyFn('宋体')" type="success" plain>宋体</el-button>
                    <el-button @click="changeFontFamilyFn('楷体')" type="warning" plain>楷体</el-button>
                    <el-button @click="changeFontFamilyFn('微软雅黑')" type="danger" plain>微软雅黑</el-button>
                </el-row>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute);
                this.$store.commit("addTab", newRoute);
            }
        }
    },
    methods: {
        // 修改界面宽度
        changeMaxWidthFn(value) {
            this.$store.commit("changeMaxWidth", value)
        },
        // 修改界面字体大小
        changeFontSizeFn(value) {
            this.$store.commit("changeFontSize", value)
        },
        // 修改界面字体类型
        changeFontFamilyFn(value) {
            this.$store.commit("changeFontFamily", value)
        }
    }
}
</script>